<template>
    <div class="person">
        <h2>{{ num }}</h2>
        <button @click="addNum">点我+1</button>
        <hr>
        <img v-for="(dog, index) in dogList" :src="dog" :key="index">
        <br>
        <button @click="getDog">再来一只狗</button>
    </div>
</template>

<!-- 使用hook模块化组件，数字累加的功能放到一个模块，狗图片的功能放到一个模块 -->
<script lang="ts" setup name="Person">
    
    import useSum from '../hooks/useSum';
    import useDog from '../hooks/useDog';
   
    // 解构接收对应模块返回的数据
    const {num, addNum} = useSum()
    const {dogList, getDog} = useDog()

</script>

<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}

img{
    height: 100px;
    margin-right: 10px;
}
</style>